<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏 - milkcode</title>
    <link rel="stylesheet" href="/styles.css">
    <script th:if="${session.user == null}" src="/js/ad.js"></script>
    <style>
        .favorites-container {
            width: min(1000px, 90%);
            margin: 90px auto 2rem;
            padding: 0 1rem;
        }

        .favorites-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
        }

        .favorites-title {
            font-size: 1.8rem;
            color: var(--text-color);
            font-weight: 700;
        }

        .favorites-count {
            color: #64748b;
            font-size: 0.875rem;
        }

        .favorites-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .favorite-item {
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .favorite-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 16px rgba(37, 99, 235, 0.1);
            border-color: var(--primary-color);
        }

        .favorite-cover {
            width: 100%;
            height: 160px;
            position: relative;
            overflow: hidden;
        }

        .favorite-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .favorite-item:hover .favorite-cover img {
            transform: scale(1.05);
        }

        .favorite-content {
            padding: 1.25rem;
        }

        .favorite-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 0.5rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .favorite-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
            color: #64748b;
        }

        .favorite-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .favorite-tag {
            background: rgba(37, 99, 235, 0.1);
            color: var(--primary-color);
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .favorite-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .favorite-link {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.875rem;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }

        .favorite-link:hover {
            text-decoration: underline;
        }

        .remove-favorite {
            background: none;
            border: none;
            color: #ef4444;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .remove-favorite:hover {
            background: rgba(239, 68, 68, 0.1);
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: #64748b;
        }

        .empty-state svg {
            width: 64px;
            height: 64px;
            margin-bottom: 1rem;
            color: #94a3b8;
        }

        .empty-state h3 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }

        .empty-state p {
            margin-bottom: 1.5rem;
        }

        .browse-link {
            display: inline-flex;
            align-items: center;
            padding: 0.75rem 1.5rem;
            background: var(--primary-color);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .browse-link:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
        }

        @media screen and (max-width: 768px) {
            .favorites-grid {
                grid-template-columns: 1fr;
            }

            .favorites-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;
            }
        }

        @media (max-width: 600px) {
            .favorites-container {
                margin-top: 180px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="header-content">
            <h1>milkcode</h1>
            <nav class="header-nav">
                <div class="search-container">
                    <input type="text" class="search-input" placeholder="搜索资源...">
                    <svg class="search-icon" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                    </svg>
                </div>
                <div class="nav-buttons">
                    <a href="/" class="nav-link">返回首页</a>
                    <a href="/login" class="login-btn" th:if="${session.user == null}">登录去广告</a>
                    <div class="user-info" th:if="${session.user != null}">
                        <a href="/my-collections" class="nav-link">我的收藏</a>
                        <span class="user-name" th:text="${session.user.userName}">用户名</span>
                        <a href="javascript:void(0)" class="nav-link" onclick="handleLogout()">退出</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <main>
        <div class="favorites-container">
            <div class="favorites-header">
                <div>
                    <h2 class="favorites-title">我的收藏</h2>
                    <p class="favorites-count" th:text="'共收藏 ' + ${total} + ' 个资源'">共收藏 0 个资源</p>
                </div>
            </div>

            <div class="favorites-grid" th:if="${!collections.isEmpty()}">
                <!-- 收藏项目 -->
                <div class="favorite-item" th:each="resource : ${collections}">
                    <div class="favorite-cover">
                        <img th:src="${resource.coverUrl != null ? resource.coverUrl : 'https://picsum.photos/400/240'}" 
                             th:alt="${resource.title}"
                             onerror="this.src='https://picsum.photos/400/240'">
                    </div>
                    <div class="favorite-content">
                        <h3 class="favorite-title" th:text="${resource.title}">资源标题</h3>
                        <div class="favorite-meta">
                            <span th:text="${#dates.format(resource.createTime, 'yyyy年M月')}">2024年3月</span>
                            <span th:text="${resource.author != null ? resource.author : '未知作者'}">作者</span>
                        </div>
                        <div class="favorite-tags">
                            <span class="favorite-tag" th:if="${resource.author != null}" th:text="${resource.author}">作者</span>
                        </div>
                        <div class="favorite-actions">
                            <a th:href="@{'/resource/id/' + ${resource.id}}" class="favorite-link">
                                查看详情
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="currentColor" d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/>
                                </svg>
                            </a>
                            <button class="remove-favorite" th:onclick="'removeCollection(' + ${resource.id} + ')'" title="取消收藏">
                                <svg viewBox="0 0 24 24" width="20" height="20">
                                    <path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 空状态展示 -->
            <div class="empty-state" th:if="${collections.isEmpty()}">
                <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                </svg>
                <h3>暂无收藏</h3>
                <p>您还没有收藏任何资源</p>
                <a href="/" class="browse-link">浏览资源</a>
            </div>
        </div>
    </main>

    <footer>
        <p>© 2024 milkcode. All rights reserved.</p>
    </footer>

    <script th:inline="javascript">
        // 处理退出登录
        async function handleLogout() {
            try {
                const response = await fetch('/api/logout');
                const result = await response.json();
                
                if (result.success) {
                    window.location.href = '/';
                } else {
                    alert(result.message || '退出失败，请稍后重试');
                }
            } catch (error) {
                console.error('退出请求失败:', error);
                alert('退出请求失败，请稍后重试');
            }
        }

        // 取消收藏
        async function removeCollection(resourceId) {
            if (!confirm('确定要取消收藏吗？')) {
                return;
            }

            try {
                const response = await fetch(`/api/resource/${resourceId}/collection`, {
                    method: 'DELETE'
                });

                if (response.ok) {
                    // 刷新页面以更新收藏列表
                    window.location.reload();
                } else {
                    throw new Error('操作失败');
                }
            } catch (error) {
                console.error('取消收藏失败:', error);
                alert('操作失败，请稍后重试');
            }
        }
    </script>
</body>
</html> 